<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>142_文档加载</title>

		<script>
			/*	网页是自上向下加载的，如果将js代码编写到网页的上边，
				js代码在执行时，网页还没有加载完毕，这时会出现无法获取到DOM对象的情况 
				如何解决这个问题:
					1.将script标签编写到body的最后；
					2.将代码编写到window.onload的回调函数中；
					3.将代码编写到document对象的DOMContentLoaded的回调函数中(执行时机更早)；
					4.将代码编写到外部的js文件中，然后以defer的形式进行引入；
						(执行时机更早，早于DOMContentLoadedp)。
				
				不建议把script标签放到外面。
				把它写到body的外边以后,使得它就变成了html的子元素,等于html子元素多了一个。
				但是根据我们的标准啊,html子元素只有两个。一个是head，一个是body。
				
				window.onload 事件会在窗口中的内容加载完毕之后才触发。
					是所有的文档加载完成后，才触发。一个窗口可能有多个文档。
				document的DOMContentLoaded事件会在当前文档加载完毕之后触发。
				 
			 */
			window.onload = function() {
				const btn = document.getElementById("btn")
				console.log(btn)
			}
			window.addEventListener("load", function() {
				const btn = document.getElementById("btn")
				console.log(btn, "lis")
				alert("windo")
			})

			document.addEventListener("DOMContentLoaded", function() {
				alert("doc")
			})

			let btn2 = document.getElementById("btn_2");
			console.log(btn2);
		</script>

		<script defer src="./script.js/142_document_load.js"></script>
	</head>
	<body>
		<button id="btn">点我一下</button>
		<!--iframe内联框架 引入一个外部文档 -->
		<iframe src="https://www.lilichao.com" frameborder="0"></iframe>
	</body>
</html>